<template>
	<div class="yz">
		<view class="header">
			<div class="left" @click="onShow_DropDownPopup">
				<h2>分类</h2>
				<text class="cuIcon-triangledownfill"></text>
			</div>
			<div class="right">
				<view class="icon-circle"><text class="cuIcon-order" @click="$pub.naviTo('/pages/public/TransferPopup/TransferManager')"></text></view>
				<view class="icon-circle"><text class="cuIcon-add" @click="isShow_UploadPopup = true"></text></view>
				
				<view class="relative">
					<view class="icon-circle"><text class="cuIcon-moreandroid" @click="showSortMenu(true)"></text></view>
					<view class="H5-Mask" @touchmove.stop.prevent="H5_Mask_Move" @click="H5_Mask_Cancel" v-if="H5_Mask"></view>
					<view class="sort-memu" v-if="sortMemu_show">
						<view class="listitem flex ali-sta" @click="onSort('name',j)" v-for="(i, j) in sortList" :key="j" :class="i.isActive?'fo-blue':''">
							<text :class="i.icon" class="mr20"></text>
							<text >{{i.name}}</text>
						</view>
					</view>
				</view>
			</div>
		</view>

		<!-- 下拉菜单 -->
		<DropDownPopup :isShow_H5_Mask.sync="isShow_H5_Mask" :isMask="true">
			<view slot="content" class="list">
				<view class="list-item">
					<image class="list-item-img" src="../../../static/img/home/UploadPictures.png"></image>
					<text>照片</text>
				</view>
				<view class="list-item">
					<image class="list-item-img" src="../../../static/img/home/UploadVideo.png"></image>
					<text>视频</text>
				</view>
				<view class="list-item">
					<image class="list-item-img" src="../../../static/img/home/UploadDoc.png"></image>
					<text>文档</text>
				</view>
				<view class="list-item">
					<image class="list-item-img" src="../../../static/img/home/UploadAudio.png"></image>
					<text>音频</text>
				</view>
				<view class="list-item">
					<image class="list-item-img" src="../../../static/img/index/story.png"></image>
					<text>应用</text>
				</view>
				<view class="list-item">
					<image class="list-item-img" src="../../../static/img/index/audio.png"></image>
					<text>BT种子</text>
				</view>

				<view class="list-item">
					<image class="list-item-img" src="../../../static/img/home/UploadOtherFiles.png"></image>
					<text>其他</text>
				</view>
			</view>
		</DropDownPopup>
		
		<upload-popup :isShow_UploadPopup.sync="isShow_UploadPopup"></upload-popup>
	</div>
</template>
<script>
import UploadPopup from '../../public/UploadPopup.vue';
import DropDownPopup from '../../public/DropDownPopup.vue';
export default {
	name: 'CxyHeader',
	components: { UploadPopup,DropDownPopup },
	data() {
		return {
			isShow_H5_Mask: false ,// DropDownPopup是否显示
			isShow_UploadPopup: false,
			
			
			H5_Mask: false, // 遮罩层
			sortMemu_show: false ,// 是否显示排序菜单
			sortList:[
				{name:"按文件大小排序",icon:'cuIcon-cuIcon',type:"size",isActive:false},
				{name:"按文件名排序",icon:'cuIcon-all',type:"name",isActive:false},
				{name:"按修改时间排序",icon:'cuIcon-countdown',type:"time",isActive:false}
			]
		};
	},
	watch:{
		isShow_UploadPopup() {
			this.isShow_UploadPopup?uni.hideTabBar({animation:true}):uni.showTabBar({animation:true})
		}
	},
	methods: {
		onShow_DropDownPopup() {
			this.isShow_H5_Mask = true;
		},
		
		showSortMenu(bool) {
			this.H5_Mask = bool;
			this.sortMemu_show = this.H5_Mask;
		},
		H5_Mask_Move() {
			return;
		},
		H5_Mask_Cancel() {
			this.showSortMenu(false);
		},
		onSort(type,index) {
			uni.showLoading({mask:true,title:'排序中~'})
			this.sortList[index].isActive = true
			setTimeout(()=>{
				this.showSortMenu(false);
				this.sortList[index].isActive = false
				uni.hideLoading()
			},1000)
		}
	}
};
</script>

<style lang="less" scoped>
.yz {
	position: sticky;
	top: calc(var(--status-bar-height));
	box-sizing: border-box;
	z-index: 100;
}
.header {
	background-color: #fff;
	z-index: 100;
	padding: 10px 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left {
		display: flex;
		align-items: center;
	}
	.right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 130px;
	}
}

// 下拉菜单
.list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	.list-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 52rpx;
		.list-item-img {
			height: 80rpx;
			width: 80rpx;
		}
	}
}




// 排序菜单 + 遮罩层
.sort-memu {
	z-index: 99999;
	background-color: #ffffff;
	position: absolute;
	left: -230rpx;
	top: 90rpx;
	box-shadow: -1px 1px 2px 0px #eee, inset -1px 1px 2px 0px #eee;
	border-radius: 10rpx;
	.listitem {
		justify-content: flex-start;
		width: 300rpx;
		padding: 30rpx;
		box-shadow: 0px 1px #f1f1f1;
	}
}
.H5-Mask {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.1);
	z-index: 99998;
}
</style>
